<template>
  <div class="d3-tree">
    <div class="buttons">
      <button @click="addNode">添加节点</button>
      <button @click="showText">显示线上文本</button>
      <button @click="createConnection">创建连线</button>
      <button @click="toggleNodeRenderMode">节点渲染模式切换</button>
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
      <div>
        <input type="text" v-model="value">
        <button @click="modifyValue">修改选择节点文本</button>
        <input type="text" v-model="searchValue">
        <button @click="search">节点信息搜索</button>
      </div>
      <div class="animation"></div>
    </div>
    <div ref="container" style="height: 100vh"></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import json from "../../public/json/treeData1.json";
// import json from "../../public/json/flare-2.json";
import {TreeMind} from "../utils/d3Tree/treeMind.js";

const container = ref(null)
const value = ref('')
const searchValue = ref('12523512543754623542342')

let currentNode, locationNext

/**
 * @var {TreeMind}
 */
let treeMind

let id = 20

onMounted(() => {
  console.log('------1-----', Date.now())
  json.children[0].children[1].children[9].children[0].children[3].children = new Array(10).fill(0).map(v => {
    return {
      "name": "AspectRatioBanker",
      "text": "12523512543754623542342",
      "value": 7074,
      "id": id++,
      "upText": "upText",
      "downText": "downText"
    }
  })
  console.log('------2-----', Date.now())
  treeMind = new TreeMind(container.value, json, {disabled: true})

  // 添加额外的连线
  treeMind.batchCreateExtraConnection([
    {
      source: 11,
      target: 12
    }
  ])

  treeMind.dispatch.on('iconClick', function (event) {

  })
  treeMind.dispatch.on('contextmenu', function (event) {

    treeMind.addNode(event.node, {
      "name": "school-----",
      "heart": true,
      "punch-clock": 3,
    })
  })
  treeMind.dispatch.on('selected', function (event) {
    console.log(event.data.nodes)
  })
  treeMind.dispatch.on('delete', function (event) {

    treeMind.deleteNodes(event.node)
  })
  treeMind.dispatch.on('nodeDblclick', function (event) {

    const {node: {data}} = event
    value.value = data.text
    currentNode = event.node
  })

  window.treeMind = treeMind
})

function addNode() {

}

function showText() {
  treeMind.visibleConnectionText()
}

function createConnection() {
  treeMind.createExtraConnection(...treeMind.getSelected())
}

function toggleNodeRenderMode() {
  treeMind.toggleNodeRenderMode()
}

function modifyValue() {
  treeMind.updateNode(currentNode, {
    text: value.value,
    a: '支付宝收款',
    name: '就看撒'
  })
}

function search() {

  if (locationNext) {
    locationNext()
    return
  }


  const res = treeMind.search({
    text: searchValue.value
  })
  locationNext = res.locationNext
}

function zoomIn() {
  treeMind.scale(2)
}

function zoomOut() {
  treeMind.scale(0.6)
}
</script>

<style scoped lang="scss">
.d3-tree {
  position: relative;
  height: 100vh;

  .buttons {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .animation {
    width: 20px;
    height: 20px;
    background-color: #2c3e50;

    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>
